<template>
    <div class="resturantListContatin">
        <mt-loadmore id="resuturantListLoad" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" 
                        @bottom-status-change="handleBottomChange" :auto-fill="autoFill"
                        :bottomPullText = "bottomPullText"
                        >
        	<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in resturantList" :key="item.id" @click="resturantClick(item.id,item.name)">
					<a href="javascript:;">
						<img class="mui-pull-left resturantImg " :src="item.img">
						<div class="mui-media-body">
							<section class="index-line_1">
                                <h3 class="index-shopname"> 
                                    <span>{{item.name}}</span>
                                </h3> 
                            </section>

                            <section class="index-line_2">
                                <div class="index-rateWrap">
                                    <div class="Rating-wrapper">
                                        <i class="iconfont icon-xing"></i>
                                    </div> 
                                    <p class="index-rate">{{item.rating}}</p> 
                                    <p>月售{{item.recentOrderNum}}单</p>
                                </div> 

                                <div class="sender">
                                    小老弟专送
                                </div>   
                            </section>


							 <section class="index-line_3">
                                <p>¥{{item.floatMinimumOrderAmount}}起送</p>
                                <p>配送费¥{{item.floatDeliveryFee}}</p>

                             </section>
						</div>
					</a>
				</li>

			</ul>
        </mt-loadmore>
    </div>
</template>


<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            resturantList:[],
            page:1,
            size:10,
            allLoaded:false,
            autoFill:false,
            bottomPullText:"加载更多"
        }
    },
    props:["url"],
    methods:{
        reset(url){
            this.url=url;
            this.page =1;
            this.size = 10;
            this.resturantList = [];
            this.getResurant()
        },
        getResurant(endFun){
            opt = {
                params:{
                    page:this.page,
                    size:this.size
                }
            }
            this.$http.get(this.url,opt).then(res=>{
                let body = res.body;
                 if(!body.success){
                    Toast( body.msg);
                    return;
                }
                
                let data = body.data;
                this.resturantList =  this.resturantList.concat(data)
                this.page = this.page + 1;
                if(endFun!= null){
                    endFun();
                }
            });
            
        },
        loadTop(){},
        loadBottom(id){
            this.getResurant(()=>{
                this.$refs.loadmore.onBottomLoaded();
            });
        },
    
        handleBottomChange(a,b){
        },

        resturantClick(id,name){
            this.$router.push({path:"/onlyHead/goods",query:{id:id,name:name}})
        }


    },
    created(){
        this.getResurant()
    }
    
}
</script>

<style scoped>
    .resturantListContatin .mui-table-view:before,.resturantListContatin .mui-table-view:after {
        background-color: #efefef;
    }

    .resturantListContatin .mui-table-view-cell:after{
         background-color: #efefef;
    }

    .resturantListContatin{
        padding-bottom: 21.333333vw;
    }

    .resturantImg{
        width: 1.733333rem;
        width: 17.333333vw;
        height: 1.733333rem;
        height: 17.333333vw;
        margin-right: 2.666667vw;
    }

    .index-shopname{
 
        display: flex;
        margin: 0;
        padding: 0;
        color: #333;
        font-weight: 700;
        font-size: 15px;
        overflow: hidden;
        
    }

    .mui-media-body{
        display: flex;
        justify-content:space-between;
        height: 1.733333rem;
        height: 17.333333vw;
        flex-direction:column;

    }

    .index-rateWrap{
        display: flex;
    }

    .index-line_2 .index-rateWrap p{
        font-size: 11px;
        line-height: 22px;
        margin-right: 6px;
    }

    .index-line_2{
        display: flex;
        justify-content: space-between;
    }

    .icon-xing{
        font-size: 14px;
        color: #f55611;
        margin-right: 3px;
    }

    .index-rate{
        color: #f55611;
    }

    

    .index-line_3 p{
        font-size: 12px;
        float: left;
    }

    .index-line_3 p:nth-child(1):after{
            margin: 0 .017067rem;
            margin: 0 .170667vw;
            margin: 0 .08rem;
            margin: 0 .8vw;
            color: #ddd;
            content: "|";
    }

    .sender{
        background-color: #00adff;
        color: #fff;
        font-size: 11px;
        height: 16px;
        padding: 1px 3px;
        line-height: 16px;
        border-radius:2px;
    }

    .mui-table-view-cell:active{
        background-color: #ccc
    }

   
    


</style>


